import React, { PureComponent } from 'react';
import { Typography, List, Card, Icon, Avatar, Divider, Popconfirm } from 'antd';
import styles from './index.less';
import { withRemove } from './index';
import GoodsModal from '../GoodsModal';

const { Text } = Typography;

@withRemove
class GoodsComponent extends PureComponent {
  constructor(props) {
    super(props);
    const { content } = this.props.data;
    this.state = {
      content: content || [],
      // 初次添加，默认打开选择弹框
      visible: typeof content === 'undefined',
    };
  }

  handleRemove = spuCode => {
    this.setState(prevState => {
      const content = prevState.content.filter(v => v.spuCode !== spuCode);
      const { data } = { ...this.props };
      data.content = content;
      if (content.length === 0) {
        this.props.onRemove();
      } else {
        this.props.onChange(data);
      }
      return { content };
    });
  };

  handleGoodsSelection = (skuData, skuCode, spuData) => {
    const { data } = { ...this.props };
    let { content } = { ...this.state };
    content = content.concat(spuData);
    data.content = content;
    this.props.onChange(data);
    this.setState({ content });
  };

  render() {
    const { content, visible } = this.state;
    return (
      <div className={styles.goods}>
        <Divider>
          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
            商品组件
          </Typography.Text>
        </Divider>
        <List
          grid={{
            column: 1,
            gutter: 10,
          }}
          dataSource={content.concat({})}
          renderItem={item => (
            <List.Item>
              {item.spuCode ? (
                <Card hoverable>
                  <Card.Meta
                    avatar={<Avatar shape="square" size={70} src={item.logoImageUrl} />}
                    title={item.productName}
                    description={item.productDesc}
                  />
                  <div className="price">
                    <Text type="danger">{item.salePrice}</Text>
                    <br />
                    <Text delete>{item.price}</Text>
                  </div>
                  {content.length === 1 ? (
                    <Popconfirm
                      title="确认删除后，将移除该商品组件"
                      onConfirm={() => this.handleRemove(item.spuCode)}
                    >
                      <Icon type="close-circle" theme="twoTone" />
                    </Popconfirm>
                  ) : (
                    <Icon
                      type="close-circle"
                      theme="twoTone"
                      onClick={() => this.handleRemove(item.spuCode)}
                    />
                  )}
                </Card>
              ) : (
                <Card hoverable className="add" onClick={() => this.setState({ visible: true })}>
                  <Icon type="plus" />
                </Card>
              )}
            </List.Item>
          )}
        />
        <GoodsModal
          selectAll
          saleType="no"
          visible={visible}
          expanded={false}
          onSuccess={this.handleGoodsSelection}
          disabledRowKeys={content.map(v => v.spuCode)}
          onCancel={() => this.setState({ visible: false })}
        />
      </div>
    );
  }
}
export default GoodsComponent;
